<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">发送ajax请求</button>
    <script>
      //   const btn = document.getElementById('btn')
      btn.onclick = function () {
        // 1. 创建xhr实例
        const xhr = new XMLHttpRequest()

        // 2. 设置请求首行
        xhr.open('get', 'http://localhost:5000/xxx')

        // 3. 设置请求头,注意:get请求可以不设置

        // 4. 设置请求主体并发送请求
        // get请求可以不传入任何内容,或传入null
        xhr.send() // send小括号的内容就是请求主体的内容

        console.log('请求之后的的代码执行了')
        // 由于ajax请求是异步的.并且请求响应结束之后页面没有任何变化,所以我们需要通过代码接听请求响应是否完成
        // 监听readyState的变化
        // 只能监听到2,3,4
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            //表示请求响应完成
            if (xhr.status === 200) {
              //表示成功了
              console.log('请求成功')
            } else {
              // 表示失败了
              console.log('请求失败')
            }
          }
        }
      }
    </script>
  </body>
</html>
